<template>
    <el-dialog v-model="dialogVisible" title="生成方案" width="500" :before-close="clear">
        <el-form :model="form" :rules="rules" label-width="auto" ref="ruleFormRef" style="max-width: 600px">
            <el-form-item label="方案名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入方案名称"></el-input>
            </el-form-item>
            <el-form-item label="客户名称" prop="businessName">
                <el-input v-model="form.businessName" placeholder="请输入客户名称"></el-input>
            </el-form-item>
            <!-- <el-form-item label="创建人" prop="createdUser">
                <el-input v-model="form.createdUser" placeholder="请输入创建人"></el-input>
            </el-form-item> -->
            <el-form-item label="版本号" prop="version">
                <el-input v-model="form.version" placeholder="请输入版本号"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
            <el-button type="primary" @click="submit(ruleFormRef)">
                提交
            </el-button>
            <el-button @click="clear">取消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { tplAdd, tplEdit } from '../api/req.js'
import {closeThisPage} from '@/utils/closeThisPage'
import { ElMessage } from 'element-plus'

const dialogVisible = ref(false)
const previewDialogVisible = ref(false)
const props = defineProps({
    html: {
        type: String,
        deep: true,
        default: ''
    },
    title: '',
    id: ''
})

onMounted(() => {
})

const rules = reactive({
    name: [
        { required: true, message: '请输入模板名称', trigger: 'change' }
    ],
    businessName: [
        { required: true, message: '请输入客户名称', trigger: 'change' }
    ],
    // createdUser: [
    //     { required: false, message: '请输入创建人', trigger: 'change' }
    // ],
    version: [
        { required: false, message: '请输入版本', trigger: 'change' }
    ]
})

const form = reactive({
    name: '',
    // createdUser: '',
    businessName: '',
    version: ''
})

const showdialog = (val) => {
    dialogVisible.value = val ? val : !dialogVisible.value
}

const onSuccess = (file) => {
    form.coverPath = file?.data?.file?.url;
}

const onError = (err) => {
    console.log(err)
}

const preview = (e) => {
    e.stopPropagation();
    previewDialogVisible.value = true
}

const avatar = ref(null)
const clearFile = (e) => {
    e.stopPropagation();
    form.coverPath = ''
    avatar.value.clearFiles()
}

const ruleFormRef = ref(null)
const submit = async (ruleFormRef) => {
  if (!ruleFormRef) return
  await ruleFormRef.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      setTplAdd()
    } else {
      console.log('error submit!', fields)
    }
  })
}

const setTplAdd = async () => {
    try {
        let res =  null
        let params = {
            ...form,
            doc: props.html
        }
        if (props.id) {
            res =  await tplEdit({
                ...params,
                ID: ~~props.id
            })
        } else {
           res = await tplAdd({
                ...params
            })
        }
        if (res.code === 0) {
            closeThisPage()
            ElMessage('success', '新建模板成功')
        }
    } catch (error) {
        console.log(error)
    }
}

const clear = () => {
    dialogVisible.value = false;
    ruleFormRef.value.resetFields();
}

const setForm = (data) => {
    form.name = data.name;
    // form.createdUser = data.createdUser;
    form.businessName = data.businessName;
    form.version = data.version;
}

defineExpose({
    setForm,
    showdialog
})
</script>
<style scoped lang="scss">
::v-deep .avatar-uploader {
    width: 180px;
    height: 180px;
    box-sizing: border-box;

    .el-upload {
        border: 1px dashed var(--el-border-color);
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: var(--el-transition-duration-fast);
    }

    .el-upload:hover {
        border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
    }
    .el-upload-list__item-actions {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        cursor: default;
        display: inline-flex;
        justify-content: space-around;
        align-items: center;
        color: #fff;
        opacity: 0;
        font-size: 40px;
        background-color: var(--el-overlay-color-lighter);
        transition: opacity var(--el-transition-duration);
        .el-upload-list__item-preview {
            cursor: pointer;
        }
    }
    .el-upload-list__item-actions:hover {
        opacity: 1;
    }
}
</style>